<template>
  <div class="manage tc">
    <button v-on:click="add">新增</button>
    <div v-show="showAdd">
      <input type="text" placeholder="请输入人员姓名" v-model="isUserName"/>
      <button v-on:click="addName">确定</button>
    </div>
    <table class="table table-striped">
      <tr>
        <th>姓名</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>
          <span>编辑</span><span>删除</span>
        </td>
      </tr>
      <tr v-for="(item ,index) in peoples" peoples>
        <td>
          {{item.name}}
        </td>
        <td v-bind:id="index"><span v-on:click="updata">编辑</span><span v-on:click="delect">删除</span></td>
      </tr>
    </table>
    <div v-show="isView">
      <div class="content">
        <input type="text" placeholder="请输入类容" v-model="isName">
        <button v-on:click="isTrue">确定</button>
        <button v-on:click="isCancel">取消</button>
      </div>
    </div>
    <footer-nav v-bind:class="{'isUserManage': isNewPage}"></footer-nav>
  </div>
</template>
<script>
  import FooterNav from '../../components/footer.vue'
  export default{
    components: {
      FooterNav
    },
    data(){
      return {
        isNewPage: true,
        showAdd: false,
        isView :false,
        isUserName: '',
        isName :'',
        peoples: [{'name': 'sunnie'}, {'name': 'jojo'}],
        isIndex:0
      }
    }, methods: {
      add(){
        this.showAdd = true
      }, delect(e){
        var id = e.target.offsetParent.id;
        this.peoples.splice(id, 1);
      }, updata(e){
        this.isView = true;
      	var id = e.target.offsetParent.id;
        this.isIndex = id;
        this.isName = this.peoples[id].name;
      }, addName(){
        var userName = this.isUserName;
        if (userName.trim() == "") {
          console.log("需要输入文字");
        } else {
          var data = {};
          data.name = userName;
          this.peoples.push(data);
        }
      },isTrue(){
        this.peoples[this.isIndex].name = this.isName;
        this.isView = false;
      },isCancel(){
        this.isView = false;
      }
    }
  }
//  var parent = Vue.extend({
//    template: '<div>这是父组件</div>'
//  });
//  Vue.component('parent',parent);
</script>
